<template>
  <!-- 人员 -->
  <div class="fuse">
    <div class="fuse-left-side">
      <div class="border fuse-side_middle">
        <div
          class="fuse-title"
          style="height: 0.4rem; line-height: 0.4rem; padding-top: 0.1rem"
        >
          <img
            style="width: 0.4rem; margin-left: -0.1rem"
            src="../../../assets/images/img10.png"
            alt=""
          />
          <span style="vertical-align: top;cursor: pointer;" @click="tapuser">井下人员区域分布</span
          ><i class="iconfont" @click="getrealDataDetail">&#xe66e;</i>
        </div>
        <el-button type="primary" plain size="mini" v-for="(item,index) in newListArea" :key="index" style="margin-top: 20px;margin-left: 20px;" @click="getdatalist(item)">{{item}}</el-button>
        <div
          id="area"
          style="height: 3.5rem; margin-top: 0.3rem; margin-left: -10px"
        ></div>
      </div>
      <div class="border fuse-side_middle" style="margin-bottom: 0">
        <div
          class="fuse-title"
          style="height: 0.4rem; line-height: 0.4rem; padding-top: 0.1rem"
        >
          <img
            style="width: 0.4rem; margin-left: -0.1rem"
            src="../../../assets/images/img10.png"
            alt=""
          />
          <span style="vertical-align: top">人员轨迹</span
          ><i class="iconfont" @click="getPersonDetail">&#xe66e;</i>
        </div>
        <div class="fuse-main">
          <!-- <el-form
            inline
            :model="personform"
            ref="personform"
            label-width="100px"
            size="mini"
          >
            <el-form-item label="" prop="time">
              <el-date-picker
                v-model="personform.time"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 150px"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="" prop="classNum" v-show="this.csMineCode!='006080012'">
              <el-select
                v-model="personform.classNum"
                placeholder="请选择或输入班次"
                style="width: 150px"
                filterable
                clearable
                @clear="getPersonData"
              >
                <el-option
                  v-for="(item, index) in classes"
                  :key="index"
                  :value="item.psClassCode"
                  :label="item.psClassName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-search"
              @click="getPersonData"
            ></el-button>
          </el-form> -->
          <happy-scroll color="rgba(0,0,0,0.5)" size="5">
            <el-table :data="personData" class="backtable" height="290">
              <el-table-column label="序号" width="50" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ps_person_name"
                label="姓名"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="ps_mine_entertime"
                label="下井时间"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="ps_person_dept"
                label="部门"
                show-overflow-tooltip
              >
              </el-table-column>
              <!-- <el-table-column
                prop="ps_person_card"
                label="轨迹回放"
                show-overflow-tooltip
              >
              </el-table-column> -->
              <el-table-column
                label="轨迹回放"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleUpdate(scope.row)"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </happy-scroll>
        </div>
      </div>
      <!-- <div class="border fuse-side_bom">
        <div class="fuse-title">调度电话</div>
        <div class="fuse-main">
          <happy-scroll color="rgba(0,0,0,0.5)" size="5">
            <el-table :data="phoneData" class="backtable" height="150">
              <el-table-column label="序号" width="50" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="dtAddress"
                label="地点"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="dtStatus"
                label="状态"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.dtStatus === 1 ? '在线' : '停用' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="dtPhone"
                label="号码"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="psPersonCard"
                label="操作"
                show-overflow-tooltip
                width="50px"
              >
                <template slot-scope="">
                  <el-button type="text" size="mini"
                    ><i class="el-icon-phone-outline"></i
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </happy-scroll>
        </div>
      </div> -->
    </div>
    <div class="fuse-middle-side"></div>
    <div class="fuse-right-side">
      <div class="fuse-side_top" style="flex:none;height:3.3rem;overflow:hidden;">
        <div
          class="fuse-title"
          style="height: 0.4rem; line-height: 0.4rem; padding-top: 0.1rem"
        >
          <img
            style="width: 0.4rem; margin-left: -0.1rem"
            src="../../../assets/images/img10.png"
            alt=""
          />
          <span style="vertical-align: top">当前井下人数详情</span
          ><i class="iconfont" @click="getcensusDetail">&#xe66e;</i>
        </div>
        <div class="fuse-main" style="height: 3.5rem">
          <el-form
            inline
            :model="form"
            ref="form"
            label-width="100px"
            size="mini"
          >
            <el-form-item label="" prop="psPersonDept">
              <el-select
                v-model="form.psPersonDept"
                placeholder="请选择或输入部门"
                style="width: 150px"
                filterable
                clearable
                @clear="getrealData"
              >
                <el-option label="请选择" value=""></el-option>
                <el-option
                  v-for="item in psPersonDeptlist"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="" prop="psAreaName">
              <el-select
                v-model="form.psAreaName"
                placeholder="请选择或输入区域"
                style="width: 150px"
                filterable
                clearable
                @clear="getrealData"
              >
                <el-option label="请选择" value=""></el-option>
                <el-option
                  v-for="item in psAreaNamelist"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-search"
              @click="getrealData"
            ></el-button>
          </el-form>
          <happy-scroll color="rgba(0,0,0,0.5)" size="5">
            <el-table :data="tableData" class="backtable" height="2.2rem">
              <el-table-column label="序号" width="50" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="psPersonName"
                label="姓名"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="psPersonDept"
                label="部门"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="psStationLocation"
                label="位置"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="psMineEntertime"
                label="井下时长"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table>
          </happy-scroll>
        </div>
      </div>
      <div class="border fuse-side_middle" style="height:2.5rem;display:flex;flex-direction: column;">
        <div
          class="fuse-title"
          style="height: 0.4rem; line-height: 0.4rem; padding-top: 0.1rem"
        >
          <img
            style="width: 0.4rem; margin-left: -0.1rem"
            src="../../../assets/images/img10.png"
            alt=""
          />
          <span style="vertical-align: top">人员报警月统计</span>
        </div>
        <div style="flex:1;" id="police"></div>
        <!-- <div class="fuse-main">
          <el-form
            inline
            :model="dispatchform"
            ref="dispatchform"
            label-width="100px"
            size="mini"
          >
            <el-form-item label="" prop="time">
              <el-date-picker
                v-model="dispatchform.time"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 150px"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="" prop="classNum">
              <el-select
                v-model="dispatchform.classNum"
                placeholder="请选择或输入"
                style="width: 150px"
                filterable
                @change="changeclass"
              >
                <el-option
                  v-for="(item, index) in classes"
                  :key="index"
                  :value="item.pkClassId"
                  :label="item.psClassName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-search"
              @click="getDispatchData"
            ></el-button>
          </el-form>
          <el-form
            inline
            :model="dispatchformlist"
            ref="dispatchformlist"
            label-width="100px"
            size="mini"
            class="dispatchform"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="带班领导">
                  <span
                    v-for="item in dispatchformlist.psPersonName"
                    :key="item.csMineCode"
                    >{{ item.psPersonName }}</span
                  >
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="班组出勤">
                  <span>{{ dispatchformlist.className }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="出勤人数">
                  <span>{{ dispatchformlist.attendanceNum }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div> -->
      </div>
      <div class="border fuse-side_bom" style="display:flex;flex-direction: column;position:relative;">
        <div
          class="fuse-title"
          style="height: 0.4rem; line-height: 0.4rem; padding-top: 0.1rem"
        >
          <img
            style="width: 0.4rem; margin-left: -0.1rem"
            src="../../../assets/images/img10.png"
            alt=""
          />
          <span style="vertical-align: top">带班领导空岗报警统计</span>
        </div>
        
        <h1 class="linkage" v-show="linkageShow"><i class="iconfont icon-guanbi" @click="gethidden"></i><span v-html="linkage"></span></h1>
        <div class="week">
          <i class="el-icon-d-arrow-left" @click="tapshang"></i>
          <span>第{{weeknum}}周</span>
          <i class="el-icon-d-arrow-right" @click="tapxia"></i>
        </div>
        <el-calendar :range="[starttime, endtime]">
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
            <template slot="dateCell" slot-scope="{date, data}">
                <div style="margin-top: -10px;">{{ data.day.split('-').slice(2).join('-') }}</div>
                <div style="width:100%;position: relative;top: -40px;" v-for="(item,index) in tableDataleader" @click="tapdetail(item)" :key="index" v-if="(data.day.split('-').slice(2).join('-')).indexOf(item.date.split('-')[2])!=-1">
                  <span :style="{color:item.status=='正常'?'':'#e75454'}" v-if="item.timechuo<=nowtime">{{item.status}}</span>
                  <i style="display: block;width:100%;position: absolute;top:20px;">{{ data.isSelected ? '✔️' : ''}}</i>
                </div>
            </template>
        </el-calendar>    
        <!-- <happy-scroll color="rgba(0,0,0,0.5)" size="5">
            <el-table :data="tableDataleader" class="backtable" height="2.2rem">
              <el-table-column label="序号" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="time"
                label="时间"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="leader"
                label="带班领导"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table>
          </happy-scroll> -->
      </div>
    </div>
    <el-dialog width="80%" title="人员区域/分站详情" :visible.sync="isuserShow">
      <el-form
          inline
          :model="form"
          ref="form"
          label-width="100px"
          size="mini"
        >
          <el-form-item label="" prop="psAreaName">
            <el-select
              v-model="form.psAreaCode"
              placeholder="请选择区域名称"
              style="width: 150px"
              clearable
              @change="lastDayAlarmlist(form.stationCode)"
            >
              <el-option
                v-for="item in cxcgqtypelist"
                :key="item.psAreaCode"
                :label="item.psAreaName"
                :value="item.psAreaCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="ssTransducerPoint">
          </el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="tapuserlist(form.psAreaCode)"
          >查询</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="cxresetinfo"
          >重置</el-button>
        </el-form>
      <el-table :data="tableDatauser" height="500px" class="backtable">
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="psAreaCode"
          label="区域编码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="psAreaName" label="区域名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="psStationCode"
          label="分站编码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="psStationName" label="分站名称" show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog width="80%" title="实时监测详情" :visible.sync="isShow">
      <el-table :data="tableData" height="500px" class="backtable">
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="psPersonCard"
          label="人员卡代码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="psPersonName" label="姓名" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="psPersonDept"
          label="区队班组"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="psPersonDuty" label="职务" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="psMineEntertime"
          label="入井时刻"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAreaName"
          label="当前所处区域"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psAreaEntertime"
          label="进入当前区域时刻"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psStationLocation"
          label="当前所处分站"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="psStationEntertime"
          label="进入当前分站时刻"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog width="80%" title="数据统计详情" :visible.sync="censusShow">
      <el-form
        inline
        :model="censusform"
        ref="censusform"
        label-width="100px"
        size="mini"
      >
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="censusform.startTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            style="width: 150px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="censusform.endTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            style="width: 150px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="姓名" prop="psPersonName">
          <el-input
            placeholder="请输入姓名"
            v-model="censusform.psPersonName"
          ></el-input>
        </el-form-item>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="searchCensus"
          >搜索</el-button
        >
        <el-button
          size="mini"
          icon="el-icon-refresh"
          @click="resetForm('censusform')"
          >重置</el-button
        >
      </el-form>
      <el-table :data="censusData" height="500px" class="backtable">
        <el-table-column label="序号" width="60" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ps_person_name"
          label="姓名"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ps_person_dept"
          label="部门"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="sum" label="下井时长" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="num" label="下井次数" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="avg" label="平均时长" show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog width="80%" title="人员轨迹详情" :visible.sync="personShow">
      <el-form
          inline
          :model="forms"
          ref="form"
          label-width="50px"
          size="mini"
        >
          <el-form-item label="岗位" prop="postName">
            <el-select
              v-model="forms.postName"
              placeholder="请选择岗位"
              style="width: 150px"
              clearable
              @change="getPersonData"
            >
              <el-option
                v-for="(item,index) in postList"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="ssTransducerPoint">
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input
              placeholder="请输入姓名"
              v-model="forms.name"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="班组/部门" prop="deptName">
            <el-select
              v-model="forms.deptName"
              placeholder="请选择班组/部门"
              style="width: 150px"
              clearable
              @change="getPersonData"
            >
              <el-option
                v-for="(item,index) in deptlist"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-button
            type="primary"
            size="mini"
            @click="getPersonData"
          >查询</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="cxresetinfo"
          >重置</el-button>
        </el-form>
      <el-table :data="personDatas" class="backtable" height="6rem">
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ps_person_name"
          label="姓名"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ps_mine_entertime"
          label="下井时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ps_person_duty"
          label="工种/职务"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="轨迹回放"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 人员轨迹弹框 -->
    <el-dialog
      title="轨迹回放"
      :visible.sync="dialogTableVisible"
      center
      width="1000px"
    >
      <div style="display: flex">
        <ul class="info">
          <li>
            <span>煤矿编码</span>
            <span>{{ person.csMineCode ? person.csMineCode : "— —" }}</span>
          </li>
          <li>
            <span>人员卡代码</span>
            <span>{{ person.psPersonCard ? person.psPersonCard : "— —" }}</span>
          </li>
          <li>
            <span>姓名</span>
            <span>{{ person.psPersonName ? person.psPersonName : "— —" }}</span>
          </li>
          <li>
            <span>身份证号码</span>
            <span>{{ person.psIdNumber ? person.psIdNumber : "— —" }}</span>
          </li>
          <li>
            <span>岗位</span>
            <span>{{ person.psPersonPost ? person.psPersonPost : "— —" }}</span>
          </li>
          <li>
            <span>工种/职务</span>
            <span>{{ person.psPersonDuty ? person.psPersonDuty : "— —" }}</span>
          </li>
          <li>
            <span>所在区队班组/部门</span>
            <span>{{ person.psPersonDept ? person.psPersonDept : "— —" }}</span>
          </li>
          <li>
            <span>主要工作地点</span>
            <span>{{ person.psWorkPlace ? person.psWorkPlace : "— —" }}</span>
          </li>
          <li>
            <span>性别</span>
            <span>{{ person.psPersonSex ? person.psPersonSex : "— —" }}</span>
          </li>
          <li>
            <span>出生日期</span>
            <span>{{
              person.psPersonBirthday ? person.psPersonBirthday : "— —"
            }}</span>
          </li>
          <li>
            <span>血型</span>
            <span>{{
              person.psPersonBlood ? person.psPersonBlood : "— —"
            }}</span>
          </li>
          <li>
            <span>学历</span>
            <span>{{ person.psPersonEdu ? person.psPersonEdu : "— —" }}</span>
          </li>
          <li>
            <span>紧急联系电话</span>
            <span>{{ person.psPersonEmer ? person.psPersonEmer : "— —" }}</span>
          </li>
          <li>
            <span>家庭住址</span>
            <span>{{ person.psPersonAddr ? person.psPersonAddr : "— —" }}</span>
          </li>
          <li>
            <span>工种证件名称</span>
            <span>{{
              person.psPersonDutyname ? person.psPersonDutyname : "— —"
            }}</span>
          </li>
          <li>
            <span>工种证件编号</span>
            <span>{{
              person.psPersonDutyNum ? person.psPersonDutyNum : "— —"
            }}</span>
          </li>
          <li>
            <span>工种证件有效日期</span>
            <span>{{
              person.psPersonDutydate ? person.psPersonDutydate : "— —"
            }}</span>
          </li>
        </ul>
        <el-table
          v-loading="dialogloading"
          :data="dialogList"
          height="480"
          class="backtable"
        >
          <el-table-column
            prop="psPersonName"
            label="人员姓名"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="psStationName"
            label="分站名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="psStationLocation"
            label="分站位置"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="time" label="途径时间" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog
      title="特种人员报警详情"
      :visible.sync="tezhongVisible"
      top="-1.9vh"
      width="80%"
    >
      <!-- <div slot="title" class="header-title">
        <div><span></span><i>特种人员报警详情</i><span></span></div>
      </div> -->
      <tezhong :parenttime="parenttime"></tezhong>
    </el-dialog>
  </div>
</template>

<script>
// import { communal } from '@/api/common.js'
// import Echarts from '@/components/Echarts'
import tezhong from "./tezhong1.vue";
import { HappyScroll } from "vue-happy-scroll";
import "vue-happy-scroll/docs/happy-scroll.css";
import * as echarts from "echarts";
import { updateInfo } from "@/api/personnel/history";
//import { getcsMineCode } from "@/utils/auth";
export default {
  // mixins: [communal],
  components: {
    // Echarts
    HappyScroll,
    tezhong
  },
  watch:{
		"personform.time"(newVal){
			if(newVal == null){
				this.personform.time = ""
			}
		}
	},
  data() {
    return {
      iframemain:"人员",
      parenttime: "0",
      form: {
        psPersonDept: null,
        psAreaName: null,
        areaKD: null
      },
      forms: {
        duty: '',
        name: '',
        postName: '',
        deptName: ''
      },
      personform: {
        time: "",
        classNum: "",
        Name: ""
      },
      dispatchform: {
        classNum: '',
        time: ''
      },
      censusform: {
        startTime: "",
        endTime: "",
        psPersonName: ""
      },
      dispatchformlist: {
        attendanceNum: null,
        psPersonName: [],
        classNum: null,
        className: null
      },
      censusShow: false,
      personShow: false,
      isuserShow:false,
      psPersonDeptlist: [],
      psAreaNamelist: [],
      personData: [],
      personDatas: [],
      phoneData: [],
      censusData: [],
      tableData: [],
      tableDataleader:[],
      tableDatauser:[],
      newListArea:[],
      deptlist:[],
      dutylist:[],
      postList: ['矿领导'],
      Img: {
        backgroundImage:
          "url(" + require("../../../assets/img/border_bg01.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      isShow: false,
      classes: [],
      dialogTableVisible: false,
      person: [],
      dialogloading: false,
      dialogList: [],
      cxcgqtypelist:[],
      tezhongVisible:false,
      starttime:'',
      endtime:'',
      weeknum:'',
      thisWeek:'',
      linkageShow:false,
      linkage:'',
      nowtime:'',
      houtime:''
     // csMineCode:getcsMineCode()
    };
  },
  methods: {
    // 获取当前年月日
    getDate() {
      const year = new Date().getFullYear()
      const month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      const date = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      // const hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
      // const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      // const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      return year + '-' + month + '-' + date
    },
    tapdetail(item){
      // item.qList = ['2023-08-17 20:00:00-->2023-08-18 00:00:00','2023-08-20 20:00:00-->2023-08-22 00:00:00']
      if(item.qList.length>0&&item.timechuo<=this.nowtime){
        this.linkageShow = true
        if(item.qList&&item.qList.length == 1){
          this.linkage = `<p>带班领导当日空岗时间为：</p>
                          <p>${item.qList[0].split('-->')[0]}-${item.qList[0].split('-->')[1]}</p>
                          <p>空岗时长是${item.total}。</p>`
        }else if(item.qList&&item.qList.length > 1){
          this.linkage = `<p>带班领导当日空岗时间分别为：</p>
                          <ul> 
                            ${item.qList.map(items=>{ 
                              return `<li>
                                        <p>${items.split('-->')[0]}-${items.split('-->')[1]}</p>
                                      </li>`
                            }).join('')}
                          </ul><p>空岗时长是${item.total}。</p>`
        }
      }
    },
    
    gethidden(){
      this.linkageShow = false
    },
    getWeektime () {
       let oneDayTime = 1000 * 60 * 60 * 24
       let today = new Date()
       let todayDay = today.getDay() || 7
       let startDate = new Date(
         today.getTime() - oneDayTime * (todayDay - 1)
       )
       let dateList = []
       this.tableDataleader = []
       for (let i = 0; i < 7; i++) {
         let temp = new Date(startDate.getTime() + i * oneDayTime)
         let year = temp.getFullYear()
         let month = temp.getMonth() + 1 < 10 ? '0' + (temp.getMonth() + 1) : temp.getMonth() + 1
         let day = temp.getDate() < 10 ? '0' + temp.getDate() : temp.getDate()
         dateList[i] = `${year}-${month}-${day}`
       }
       this.starttime = dateList[0]
       this.endtime = dateList[dateList.length-1]
       this.getWeekNumber(this.starttime)
       this.tapleaderlist()
        return dateList
     },
     isLeapYear (year) {
      return (year % 400 == 0) || (year % 4 == 0 && year % 100 != 0)
    },
    getMonthDays (year, month) {
      return [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month] || (this.isLeapYear(year) ? 29 : 28)
    },
     getWeekNumber (date) {
      var now = new Date(date),
        year = now.getFullYear(),
        month = now.getMonth(),
        days = now.getDate()
      for (var i = 0; i < month; i++) {
        days += this.getMonthDays(year, i)
      }
      var yearFirstDay = new Date(year, 0, 1).getDay() || 7
      var week = null
      if (yearFirstDay == 1) {
        week = Math.ceil(days / yearFirstDay)
      } else {
        days -= (7 - yearFirstDay + 1)
        week = Math.ceil(days / 7) + 1
      }
      console.log(new Date(year, 0, 1).getDay())
      this.weeknum = week
      return week
    },
    getTime(time,datenum) {
 //time = 7下周  -7上周   0本周
      let date = new Date(datenum); //this.chaoZuoTime
      let currentFirstDate = new Date(date);

      let formatDate = function(date) {
        // console.log(date);
        let year = date.getFullYear(); //年
        let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
         let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        // let arr = ["日", "一", "二", "三", "四", "五", "六"];
        let week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][
          date.getDay()
        ];
        //我需要的格式是  （周几 月.日） 这里看你们的需求
        return year + "-" + month + "-" + day;
      };
      let addDate = function(date, n) {
        // console.log(date.getDate() + n);
        date.setDate(date.getDate() + n);
        return date;
      };
      let setDate = function(date) {
        let week = date.getDay() - 1;
        date = addDate(date, week * -1);
        currentFirstDate = new Date(date);
        let weekList = [];
        for (let i = 0; i < 7; i++) {
          weekList[i] = formatDate(i == 0 ? date : addDate(date, 1));
        }
        return weekList;
      };
      this.thisWeek = []
      // let upWeek = setDate(addDate(currentFirstDate, -7));
      this.thisWeek = setDate(addDate(currentFirstDate, time)); //本周
      // let nextWeek = setDate(addDate(currentFirstDate, 7)); //下周
      // let today = formatDate(date); //今日日期
      this.starttime = this.thisWeek[0]
      this.endtime = this.thisWeek[this.thisWeek.length-1]
      this.getWeekNumber(this.thisWeek[0])
      this.tapleaderlist()
      console.log(110,this.thisWeek);
    },
     tapshang(){
      this.getTime(-7,this.starttime)
     },
     tapxia(){
      this.getTime(7,this.starttime)
     },
    // 获取班组/部门列表
    getdept(){
      this.$http.post("/staff/staffData/psPersonDept").then(res => {
        if (res.code === 200) {
          this.deptlist = res.data;
        }
      })
    },
    // 获取工种/职务列表
    getduty(){
      this.$http.post("/staff/staffData/ps_person_duty").then(res => {
        if (res.code === 200) {
          this.dutylist = res.data;
        }
      })
    },
    // 获取岗位
    // getPost() {
    //   this.$http.post("/staff/staffData/psPersonPost").then(res => {
    //     this.postList = res.data
    //   })
    // },
    // 获取区域下拉列表
    getarea(){
      this.$http.get("/staff/home/areaList").then(res => {
        if (res.code === 200) {
          this.cxcgqtypelist = res.data;
        }
      })
    },
    cxresetinfo(){
      this.form.psAreaCode = ''
      this.tapuserlist(this.form.psAreaCode)
    },
    // 点击井下人员区域分布
    tapuserlist(type){
      this.$http.get("/staff/home/areaStationList?pageNum=1&pageSize=10000&psAreaCode="+type).then(res => {
        if (res.code === 200) {
          this.tableDatauser = res.data.data;
        }
      })
    },
    // 带班领导空岗报警统计(日历版)
    tapleaderlist(){
      this.$http.get("/navigation/kongGang?startDate="+this.starttime+'&endDate='+this.endtime).then(res => {
        if (res.code === 200) {
          this.tableDataleader = res.data;
          // 当前日期时间戳
          var strtime =this.getDate();
          var date =new Date(strtime.replace(/-/g,'/'));
          this.nowtime = date.getTime();
          // 列表返回时间戳
          this.tableDataleader.forEach(item => {
            this.$set(item,'timechuo',item.date)
            item.timechuo = new Date(item.timechuo.replace(/-/g,'/'));
            item.timechuo = item.timechuo.getTime();
          })
          console.log(999,this.nowtime,this.tableDataleader)
        }
      })
    },
    // 带班领导空岗报警统计
    // tapuserlist(type){
    //   this.$http.get("/staff/home/noLeader").then(res => {
    //     if (res.code === 200) {
    //       this.tableDataleader = res.data;
    //     }
    //   })
    // },
    tapuser(){
      this.tableDatauser = []
      this.isuserShow = true
      this.getarea()
      this.$http.get("/staff/home/areaStationList?pageNum=1&pageSize=10000&psAreaCode=").then(res => {
        if (res.code === 200) {
          this.tableDatauser = res.data.data;
        }
      })
    },
    getdatalist(areatype) {
      this.tableData = [];
      this.$http.get("/staff/home/getData").then(res => {
        // res = res.data
        if (res.code === 200) {
          this.tableData = res.data.staffList;
          this.personData = res.data.resultlist;
          this.phoneData = res.data.phoneList;
          this.psPersonDeptlist = res.data.listdept;
          this.psAreaNamelist = res.data.listArea;
          this.newListArea = res.data.newListArea
          var arr = [];
          var arrdata = [];
          if(res.data.personCount.xArr){
            res.data.personCount.xArr.forEach((item, index) => {
              arr.push(item + "报警");
              arrdata.push({
                value: res.data.personCount.yArr[index],
                name: item + "报警"
              });
            });
          }
          // 当前井下人员区域分布
          var area = echarts.init(document.getElementById("area"));
          var img =
            "";
          var Areadata = [];
          var yArr = [];
          res.data.NewPersonAreaCount.forEach(item =>{
            if(areatype==item.areaType){
              item.areaPersonNum.forEach(items => {
                Areadata.push({
                  name: items.ps_area_name,
                  value: items.num
                });
              });
            }
          })
          // res.data.personAreaCount.psAreaNameList.forEach((item, index) => {
          //   Areadata.push({
          //     name: item,
          //     value: res.data.personAreaCount.numList[index]
          //   });
          // });
          var trafficWay = Areadata;

          var data = [];
          var color = [
            "#00ffff",
            "#00cfff",
            "#006ced",
            "#ffe000",
            "#0FDE88",
            "#ffa800",
            "#ff5b00",
            "#ff3000"
          ];
          for (var i = 0; i < trafficWay.length; i++) {
            data.push(
              {
                value: trafficWay[i].value,
                name: trafficWay[i].name,
                itemStyle: {
                  normal: {
                    borderWidth: 5,
                    shadowBlur: 20,
                    borderColor: color[i],
                    shadowColor: color[i]
                  }
                }
              },
              {
                value: 2,
                name: "",
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: "rgba(0, 0, 0, 0)",
                    borderColor: "rgba(0, 0, 0, 0)",
                    borderWidth: 0
                  }
                }
              }
            );
          }
          var that = this 
          var seriesOption = [
            {
              name: "",
              type: "pie",
              clockWise: false,
              radius: [80, 84],
              hoverAnimation: false,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "outside",
                    color: "#efecec",
                    formatter: function(params) {
                      // var percent = 0
                      // var total = 0
                      // for (var i = 0; i < trafficWay.length; i++) {
                      //   total += trafficWay[i].value
                      // }
                      // percent = ((params.value / total) * 100).toFixed(0)
                      if (params.name !== "") {
                        return (
                          "" +
                          params.name +
                          "\n" +
                          "\n" +
                          "" +
                          params.value +
                          "人"
                        );
                      } else {
                        return "";
                      }
                    },
                    textStyle: {
                      fontSize: 15
                    }
                  },
                  labelLine: {
                    length: 10,
                    length2: 20,
                    show: true,
                    color: "#00ffff"
                  }
                }
              },
              data: data
            }
          ];
          var option1 = {
            backgroundColor: "#fff0",
            color: color,
            title: {
              text: "当前",
              subtext: "人数统计",
              top: "45%",
              textAlign: "center",
              left: "50%",
              textStyle: {
                color: "#00f6ff",
                fontSize: 16,
                fontWeight: "400"
              },
              subtextStyle: {
                color: "#00f6ff",
                fontSize: 16,
                fontWeight: "400"
              }
            },
            graphic: {
              elements: [
                {
                  type: "image",
                  z: 3,
                  style: {
                    image: img,
                    width: 185,
                    height: 185
                  },
                  left: "center",
                  top: "center",
                  position: [100, 100]
                }
              ]
            },
            tooltip: {
              show: false
            },
            legend: {
              type: 'scroll',
              icon: "circle",
              orient: "horizontal",
              // x: 'left',
              data: res.data.personAreaCount.psAreaNameList,
              // right: 'center',
              top: 0,
              left:'20px',
              right:'20px',
              align: "left",
              textStyle: {
                color: "#efecec"
              },
              itemGap: 5
            },
            toolbox: {
              show: false
            },
            series: seriesOption
          };

          area.setOption(option1);
          // 人员报警月统计
          var chart = echarts.init(document.getElementById("police"));
          var option = {
            backgroundColor: "#0B183700",
            color: [
              "#EAEA26",
              "#906BF9",
              "#FE5656",
              "#01E17E",
              "#3DD1F9",
              "#FFAD05"
            ],
            // title: {
            //     text: '网络/安全设备',
            //     left: '60',
            //     top: 0,
            //     textAlign: 'center',
            //     textStyle: {
            //         color: '#fff',
            //         fontSize: 14,
            //         fontWeight: 0
            //     }
            // },
            grid: {
              left: -100,
              top: 50,
              bottom: 10,
              right: 10,
              containLabel: true
            },
            tooltip: {
              trigger: "item",
              formatter: "{b} : {c}" + "次" + " ({d}%)"
            },
            legend: {
              type: "scroll",
              orient: "horizontal",
              y: "bottom",
              bottom: "0",
              // bottom: "0%",
              itemWidth: 16,
              itemHeight: 8,
              itemGap: 16,
              textStyle: {
                color: "#A3E2F4",
                fontSize: 12,
                fontWeight: 0
              },
              data: arr
            },
            polar: {},
            angleAxis: {
              interval: 1,
              type: "category",
              data: [],
              z: 10,
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#0B4A6B",
                  width: 1,
                  type: "solid"
                }
              },
              axisLabel: {
                interval: 0,
                show: true,
                color: "#0B4A6B",
                margin: 8,
                fontSize: 16
              }
            },
            radiusAxis: {
              min: 40,
              max: 120,
              interval: 20,
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#0B3E5E",
                  width: 1,
                  type: "solid"
                }
              },
              axisLabel: {
                formatter: "{value} %",
                show: false,
                padding: [0, 0, 20, 0],
                color: "#0B3E5E",
                fontSize: 16
              },
              splitLine: {
                lineStyle: {
                  color: "#0B3E5E",
                  width: 2,
                  type: "solid"
                }
              }
            },
            calculable: true,
            series: [
              {
                type: "pie",
                radius: ["5%", "10%"],
                // center: ['40%', '60%'],
                hoverAnimation: false,
                labelLine: {
                  normal: {
                    show: false,
                    length: 30,
                    length2: 55
                  },
                  emphasis: {
                    show: false
                  }
                },
                data: [
                  {
                    name: "",
                    value: 0,
                    itemStyle: {
                      normal: {
                        color: "#0B4A6B"
                      }
                    }
                  }
                ]
              },
              {
                type: "pie",
                radius: ["60%", "65%"],
                // center: ['40%', '60%'],
                hoverAnimation: false,
                labelLine: {
                  normal: {
                    show: false,
                    length: 30,
                    length2: 55
                  },
                  emphasis: {
                    show: false
                  }
                },
                name: "",
                data: [
                  {
                    name: "",
                    value: 0,
                    itemStyle: {
                      normal: {
                        color: "#0B4A6B"
                      }
                    }
                  }
                ]
              },
              {
                stack: "a",
                type: "pie",
                radius: ["20%", "60%"],
                // center: ['40%', '60%'],
                roseType: "area",
                zlevel: 10,
                label: {
                  normal: {
                    show: true,
                    formatter: "{b} " + "\n" + "\n" + " {c}" + "次" + " ({d}%)",
                    textStyle: {
                      fontSize: 12
                    },
                    position: "outside"
                  },
                  emphasis: {
                    show: true
                  }
                },
                labelLine: {
                  normal: {
                    show: true,
                    length: 10,
                    length2: 30
                  },
                  emphasis: {
                    show: false
                  }
                },
                data: arrdata
              }
            ]
          };

          chart.setOption(option);
          chart.on('click', function (params) {
            console.log(222,params.name) 
            if(params.name=='特种人员报警'){
              console.log(333)
              that.tezhongVisible = true
            }
            // 当componentType == "xAxis"或者 ==“yAxisx”时，取被点击时坐标轴的值params.value
            //     alert("单击了"+params.componentType+"x轴标签"+params.value); 
            // if(params.componentType == "xAxis"){  
            //     alert("单击了"+params.value+"x轴标签"+params.name);  
            // }else{  
            //     alert("单击了"+params.name+"柱状图"+params.value);  
            // }  
          });
        }
      });
    },
    // 获取班次
    getclasses() {
      this.$http.get("/staff/home/classList").then(res => {
        if (res.code === 200) {
          console.log(562, res);
          this.classes = res.data;
        }
      });
    },
    changeclass(e) {
      this.classes.forEach(item => {
        if (item.pkClassId == e) {
          this.dispatchform.className = item.psClassName;
        }
      });
    },
    // 数据统计详情
    getdatalist1() {
      this.$http.get("/staff/home/staffCensusList").then(res => {
        if (res.code === 200) {
          this.censusData = res.data.censuslist;
          // this.censusData.forEach(item => {
          //   item.avg = this.formatSeconds(item.avg);
          //   item.sum = this.formatSeconds(item.sum);
          // });
        }
      });
    },
    formatSeconds(value) {
      var theTime = parseInt(value); // 需要转换的时间秒
      var theTime1 = 0; // 分
      var theTime2 = 0; // 小时
      var theTime3 = 0; // 天
      if (theTime > 60) {
        theTime1 = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (theTime1 > 60) {
          theTime2 = parseInt(theTime1 / 60);
          theTime1 = parseInt(theTime1 % 60);
          if (theTime2 > 24) {
            // 大于24小时
            theTime3 = parseInt(theTime2 / 24);
            theTime2 = parseInt(theTime2 % 24);
          }
        }
      }
      var result = "";
      if (theTime > 0) {
        result = "" + parseInt(theTime) + "秒";
      }
      if (theTime1 > 0) {
        result = "" + parseInt(theTime1) + "分" + result;
      }
      if (theTime2 > 0) {
        result = "" + parseInt(theTime2) + "小时" + result;
      }
      if (theTime3 > 0) {
        result = "" + parseInt(theTime3) + "天" + result;
      }
      return result;
    },
    getrealData() {
      this.$http
        .get(
          "/staff/home/staffMonitorListByDeptName?DeptName=" +
            this.form.psPersonDept +
            "&areaId=" +
            this.form.psAreaName +
            "&areaKD=" +
            this.form.areaKD
        )
        .then(res => {
          if (res.code === 200) {
            this.tableData = res.data.staffList;
          }
        });
    },
    getPersonData() {
     
      this.personDatas = [];
      this.$http
        .get(
          "/staff/home/newStaffRaondition?name=" +
            this.forms.name +
            "&postName=" +
            this.forms.postName
        )
        .then(res => {
          console.log(16,res)
          if (res.code === 200) {
            this.personDatas = res.data.resultlist;
          }
        });
    },
    getrealDataDetail() {
      this.isShow = true;
    },
    getcensusDetail() {
      this.censusShow = true;
    },
    searchCensus() {
      this.censusData = [];
      this.$http
        .get(
          "/staff/home/staffCensusList?Name=" +
            this.censusform.psPersonName +
            "&startTime=" +
            this.censusform.startTime +
            "&endTime=" +
            this.censusform.endTime
        )
        .then(res => {
          if (res.code === 200) {
            this.censusData = res.data.censuslist;
          }
        });
    },
    handleUpdate(item) {
      this.dialogTableVisible = true;
      this.dialogloading = true;
      var query = {
        pkHistoryResult: item.pk_history_result
      };
      updateInfo(query).then(res => {
        this.dialogloading = false;
        console.log(344, res);
        console.log(390, res);
        this.dialogList = res.data.list;
        this.person = res.data.person;
        this.dialogloading = false;
        console.log(394, this.dialogloading);
      });
    },
    resetForm(form) {
      if (this.$refs[form] !== undefined) {
        this.$refs[form].resetFields();
      }
      this.searchCensus();
    },
    getPersonDetail() {
      this.personShow = true;
      this.getdept()
      this.getduty()
      // this.getPost()
      this.getPersonData();
    },
    getDispatchData() {
      this.$http
        .get(
          "/staff/home/staffDispatcher?classNum=" +
            this.dispatchform.classNum +
            "&time=" +
            this.dispatchform.time
        )
        .then(res => {
          console.log(630, res);
          if (res.code === 200) {
            this.dispatchformlist.attendanceNum = res.data.total;
            this.dispatchformlist.className = this.dispatchform.className;
            this.dispatchformlist.psPersonName = res.data.leader;
          }
        });
    }
  },
  created() {
    this.$bus.$emit('Iframe',this.iframemain)
    var that = this;
    that.getdatalist('其他区域');
    setTimeout(function() {
      that.getdatalist('其他区域');
    }, 60000);
    that.getdatalist1();
    that.getclasses();
    this.tapuserlist()
    this.getDate()
    this.getWeektime()
  }
};
</script>

<style lang="scss">
.fuse-main {
  box-sizing: border-box;
  padding: 10px;
}
.dispatchform .el-form-item__label {
  color: #3d93ef;
}
.dispatchform .el-form-item__content span {
  display: inline-block;
  margin-right: 10px;
}
</style>
<style lang="scss" scoped>
::v-deep .happy-scroll-content{
  width: 100% !important;
}
::v-deep .happy-scroll-bar{
  width: 0% !important;
}
::v-deep .el-dialog {
  background: url("../../../assets/img/dialogback.png") no-repeat !important;
  background-size: 100% 100% !important;
  padding: 0.2rem 0.4rem 0.3rem !important;
}
::v-deep .el-dialog__title {
  color: #fff !important;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(6, 26, 57, 0.8) !important;
}
.area_show {
  li {
    cursor: pointer;
  }
}
.fuse-title i {
  cursor: pointer;
  position: absolute;
  right: 1rem;
  top: 0.1rem;
  color: #8dc0ff;
}
::v-deep .el-input--mini .el-input__inner {
  border: 1px solid #074e83 !important;
  background: #06244ec9 !important;
  color: #ccc !important;
}
.el-input--mini .el-input__inner {
  border: 1px solid #074e83 !important;
  background: #06244ec9 !important;
  color: #ccc !important;
}
.el-select-dropdown__item {
  color: #fff !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #1a4c99 !important;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
  border: 1px solid #074e83;
  background: #06244ec9 !important;
  color: #ccc;
}
.info {
  margin-right: 30px;
  color: #3d93ef;
  li {
    list-style: none;
    span {
      display: inline-block;
      width: 180px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border: 1px solid #000;
      border-bottom: none;
    }
    span:last-child {
      border-left: none;
    }
  }
  li:last-child {
    span {
      border-bottom: 1px solid #000;
    }
  }
}
::v-deep .el-calendar-table .el-calendar-day {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px;
    height: 85px;
    color: #00ffff;
    line-height: 65px;
    text-align: center;
}
::v-deep .el-calendar {
    background-color: #fff0;
}
::v-deep .el-calendar-table tr td:first-child {
    border-left: 1px solid #2270b3;
}
::v-deep .el-calendar-table tr:first-child td {
    border-top: 1px solid #2270b3;
}
::v-deep .el-calendar-table td {
    border-bottom: 1px solid #2270b3;
    border-right: 1px solid #2270b3;
    vertical-align: top;
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}
::v-deep .el-calendar-table thead th {
    padding: 12px 0;
    color: #00ffff;
    font-weight: normal;
}
.is-selected {
    color: #96c6f6;
  }
::v-deep .el-calendar-table td.is-selected {
    background-color: #082b4fc7;
}
::v-deep .el-calendar-table .el-calendar-day:hover {
    cursor: pointer;
    background-color: #0c4c8d4a;
}
::v-deep .el-calendar__title {
    color: #00000000;
    -ms-flex-item-align: center;
    align-self: center;
    display: none;
}
::v-deep .el-calendar__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0px 0px !important;
    border-bottom: 1px solid #dfe6ec;
}
.week{
  margin: 15px;
  i{
    font-size: 0.16rem;
    cursor: pointer;
  }
  span{
    margin: 0 5px;
  }
}
.linkage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  // top: 0;
  background: rgb(65, 90, 119);
  z-index: 20;
  box-sizing: border-box;
  padding:10px 20px;
  height: 80%;
  span{
    display: inline-block;
    line-height: 28px;
    font-size: 14px;
    text-indent: 30px;
    width:100%;
    -webkit-line-clamp: 5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 5%;
  }
  i{
    position: absolute;
    right:6px;
    top:6px;
    font-size: 18px;
    cursor: pointer;
  }
}
// ::v-deep .el-dialog.innerdialog {
//   width: 55% !important;
//   height: 70% !important;
//   background: #072226 !important;
//   border: 1px solid #fff5;
//   box-shadow: 0 0 20px #fff5;
//   margin-left: 50% !important;
//   transform: translate(-50%, 0%);
// }
// ::v-deep .el-dialog {
//   width: 102.8% !important;
//   height: 103.9% !important;

//   margin-left: -27px !important;
//   background: url("../../../assets/img/dialogbg.png") no-repeat !important;
//   background-size: 100% 100% !important;
//   padding: 20px 40px 30px !important;
// }
// ::v-deep .el-dialog__title {
//   color: #fff !important;
//   font-size: 22px;
//   text-shadow: 0 0 15px rgb(30, 216, 213);
// }
// ::v-deep .el-dialog__headerbtn:hover .el-dialog__close {
//   width: 30px;
//   height: 30px;
//   color: #f15f0000 !important;
//   background: url("../../../assets/img/backjt.png") no-repeat;
//   background-size: 100% 100%;
// }
// ::v-deep .el-dialog__headerbtn .el-dialog__close {
//   width: 30px;
//   height: 30px;
//   color: #f15f0000 !important;
//   background: url("../../../assets/img/backjt.png") no-repeat;
//   background-size: 100% 100%;
// }
// ::v-deep .el-dialog__headerbtn {
//   position: absolute;
//   top: 30px;
//   right: 40px;
//   padding: 0;
//   background: 0 0;
//   border: none;
//   outline: 0;
//   cursor: pointer;
//   font-size: 24px;
// }
// ::v-deep{
//   .el-dialog{
//     margin-top: -1.9vh !important
//   }
// }
</style>
